import React from "react";

class CommentBox extends React.Component{
    constructor(props){
        super(props)
        this.state={
            value:''
        }
        // this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    //受控组件方式会导致每一个事件都有一个方法， 使用非受控组件方式ref传值，更方便react 和非react 整合
    // handleChange(event){
    //     this.setState({
    //         value:event.target.value
    //     })
    // }
    handleSubmit(event){
        // alert(this.state.value)
        if(this.textInput.value == ''){
            alert('请输入有效内容!')
            return
        }
        this.props.onAddComments(this.textInput.value)
        this.textInput.value = ''
        event.preventDefault()
    }
    render(){
        return(
            <form className="p-5" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input type="text" className="form-control" placeholder="请输入内容" ref={(textInput)=>{this.textInput = textInput}}/>
                    {/* <input type="text" className="form-control" placeholder="请输入内容" value={this.state.value} onChange={(event)=>{this.handleChange(event)}}/> */}
                </div>
                <button type="submit" className="btn btn-primary">留言</button>
                <p>已有{this.props.commentsLength}条评论</p>
            </form>
        )
    }
}

export default CommentBox